/**
 * 棉花叶片疾病识别Web应用前端脚本
 *
 * 此脚本处理图片上传、预览和结果显示的前端交互逻辑。
 * 主要功能：
 * 1. 图片选择后的预览
 * 2. 启用/禁用上传按钮
 * 3. 显示/隐藏结果卡片
 * 4. 设置结果内容
 */

// 当DOM完全加载后执行脚本
document.addEventListener('DOMContentLoaded', function() {
    // 获取页面中的DOM元素
    const uploadForm = document.getElementById('upload-form');     // 上传表单
    const fileInput = document.getElementById('file-input');       // 文件输入框
    const previewImage = document.getElementById('preview-image'); // 图片预览元素
    const uploadBtn = document.getElementById('upload-btn');       // 上传按钮
    const resultCard = document.getElementById('result-card');     // 结果卡片
    
    // 确保所需的DOM元素都存在，避免在缺少元素时执行代码
    if (uploadForm && fileInput && previewImage) {
        // 监听文件选择变化事件，用于预览选择的图片
        fileInput.addEventListener('change', function() {
            // 检查是否有文件被选择
            if (this.files && this.files[0]) {
                // 创建文件读取器对象
                const reader = new FileReader();
                
                // 当文件读取完成时执行
                reader.onload = function(e) {
                    // 设置预览图片的源为读取的数据URL
                    previewImage.src = e.target.result;
                    // 显示预览图片
                    previewImage.style.display = 'block';
                    
                    // 启用上传按钮，允许用户提交
                    if (uploadBtn) {
                        uploadBtn.disabled = false;
                    }
                };
                
                // 以数据URL形式读取文件（base64编码）
                reader.readAsDataURL(this.files[0]);
            }
        });
    }
    
    /**
     * 显示或隐藏结果卡片的辅助函数
     * 
     * @param {boolean} show - 是否显示结果卡片
     */
    window.showResult = function(show) {
        if (resultCard) {
            resultCard.style.display = show ? 'block' : 'none';
        }
    };
    
    /**
     * 设置结果内容的辅助函数
     * 
     * @param {string} className - 分类结果名称（如"健康棉花叶片"）
     * @param {string} confidence - 置信度百分比（如"95.6%"）
     * @param {string} description - 结果描述文本
     */
    window.setResultContent = function(className, confidence, description) {
        // 获取结果显示相关的DOM元素
        const resultClass = document.getElementById('result-class');           // 分类结果元素
        const resultConfidence = document.getElementById('result-confidence');  // 置信度元素
        const resultDescription = document.getElementById('result-description'); // 描述元素
        
        // 设置各元素的文本内容（如果元素存在）
        if (resultClass) resultClass.textContent = className;
        if (resultConfidence) resultConfidence.textContent = `置信度: ${confidence}`;
        if (resultDescription) resultDescription.textContent = description;
    };
}); 